웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트를 사용하면서 많이 사용되는 함수 중 하나로 setInterval()이 있다. 많이 사용된다는 것은 그만큼 중요하기 때문일 것이다. 아래는 setInterval()을 무엇인지 알아보고 어떻게 구현하는지 예제를 통해 알아보려한다.
# setInterval 사용방법
아래는 setInterval()을 사용하는 방법과 이를 효과적으로 사용하기 위한 팁과 다양한 정보를 알아보고자 한다. 먼저 setInterval()을 사용하는 기본적인 방법은 아래와 같다.setInterval(function() { ... }, 지연시간);
문법은 그리 어렵지 않다. 그럼 타이머 함수는 언제 자주 사용할까? 아래에서 알아보자.
! setInterval()을 사용하는 경우 이 함수를 사용해야 하는 경우는 매우 많이 있다. 그 중에서 몇 가지 알아보면 아래와 같은 케이스가 존재있다.
- i. 갤러리 형식의 뷰를 만들어 이미지를 정해진 시간 간격으로 바꾸어 적용하는 경우(Carousel Gallery)
- ii. 일정 시간 간격으로 배너광고를 바꾸면서 보여줄 경우
- iii. 일정 주기로 계속해서 서버와 통신이 필요한 경우
물론 이 외에도 굉장히 많이 사용된다. 그렇다면 아래에는 간단한 예제를 알아보자.
# setInterval() 예제, 5초마다 경고창 띄우는 소스보기
우리는 아주 간단한 예제를 만들어 보려한다. 먼저 5초의 시간 간격으로 계속해서 경고창을 띄우는 예제를 만들어 본다. 이런 함수를 만들 경우는 거의 없을 것이다. 매우 간단한 예제를 배우는 것이 중요하다. 이를 구현하기 위해서 아래와 같이 작성할 수 있다.playAlert = setInterval(function() {
alert('http://webisfree.com');
}, 3000);
alert('http://webisfree.com');
}, 3000);
위의 스크립트를 실행할 경우 원하는 결과, 5초의 시간 간격으로 경고창이 화면에 출력된다. 즉 정상 동작됨을 확인할 수 있다. 위 예제는 setInterval을 playAlert이라는 변수에 저장하여 사용하였다. 사실 변수선언 없이 사용하여도 잘 동작한다. 하지만 변수를 사용하는 이유는 이를 저장하면 나중에 타이머를 중지할 경우 변수와 clearInterval() 함수를 사용해 중지시킬 수 있기 때문이다.
! clearInterval을 사용한 타이머 중지
만약 위에서 작성한 타이머 playAlert을 중지하려면 아래와 같이 수행하여 중지시킬 수 있다.
clearInterval(playAlert);
그렇다면 이 함수 clearInterval()을 사용하는 좀 더 자세한 예제를 알아보자.
# clearInterval(), 타이머 중지하는 예제보기
먼저 위 코드와 동일하나 버튼을 추가하고 이 버튼을 클릭할 경우 clearInterval() 함수가 실행되도록 해볼 것이다. 그럼 아래 예제를 보자.@ clear_interval.html
<h2>clearInterval() 함수로 setInterval() 중지하기</h2>
<button onclick="startAlert();">setInterval()</button>
<button onclick="stopAlert();">clearInterval()</button>
<button onclick="startAlert();">setInterval()</button>
<button onclick="stopAlert();">clearInterval()</button>
@ clear_interval.js
startAlert = function() {
playAlert = setInterval(function() {
alert('http://webisfree.com');
}, 3000);
};
stopAlert = function() {
clearInterval(playAlert);
};
playAlert = setInterval(function() {
alert('http://webisfree.com');
}, 3000);
};
stopAlert = function() {
clearInterval(playAlert);
};
코드가 완성되었다. 실제로 위 코드를 입력하여 구동해보면 아래와 같이 잘 동작하는 것을 알 수 있다.그렇다면 이 함수의 타입을 확인해보면 어떻게 나올까?
typeof playAlert;
결과가 function 이라고 생각하겠지만 실제로는 number로 숫자타입가 나온다. 이 말은 setInterval을 실행시킬 경우 함께 인자로 넘긴 함수가 콜백으로 실행되고 이 함수를 실행한 횟수를 number 타입으로 반환하게된다. 이 값은 실행된 타이머를 종료하는 키값으로 작용하게 된다.
시간지연에 대한 함수는 setTimeout()이 있다. 일정 간격으로 반복하기 위해서 setInterval을 사용하였으나 setTimeout() 자기호출 방식을 사용하면 이와 유사한 반복되는 함수를 만들 수 있다.
# setTimeout() 함수에 대하여 알아보기
위에 언급한 setTimeout()은 지연시간을 발생시킨 후 특정 함수를 호출할 수 있습니다. 간단한 예제를 만들어보자.아래 예제는 5초 후 해당하는 함수를 한번만 호출하는 함수이다.
var showAlert = setTimeout(function() {
alert('Wow!!!');
}, 5000);
// 5초 후 경고창으로 해당문구를 출력
alert('Wow!!!');
}, 5000);
// 5초 후 경고창으로 해당문구를 출력
위 예제를 통하여 간단하게 setTimeout()을 알아보았다. 아래는 관련된 링크 주소이다.
setItimeout() 함수 바로가기 > http://webisfree.com/2014-04-08/[javascript]-시간-지연-함수-일정-시간-뒤-실행시키기-settimeout()-{}
여기까지 타이머 함수 setInterval() 그리고 clearInterval()에 대하여 알아보았다. 그러면 아래에서 직접 코드를 실행해보자. 클릭하면 타이머가 시작되고 종료할 수 있다.
<hr />
<h2>clearInterval() 함수로 setInterval() 중지하기</h2>
<br />
<button onclick="startAlert();">setInterval()</button>
<button onclick="stopAlert();">clearInterval()</button>
<script>
startAlert = function() {
playAlert = setInterval(function() {
alert('http://webisfree.com');
}, 3000);
};
stopAlert = function() {
clearInterval(playAlert);
};
</script>
<h2>clearInterval() 함수로 setInterval() 중지하기</h2>
<br />
<button onclick="startAlert();">setInterval()</button>
<button onclick="stopAlert();">clearInterval()</button>
<script>
startAlert = function() {
playAlert = setInterval(function() {
alert('http://webisfree.com');
}, 3000);
};
stopAlert = function() {
clearInterval(playAlert);
};
</script>
아래의 글도 찾고 계시지 않나요?
